<template>
  <div class="box">
    儿子的文具： {{ toy }}
    <p>父亲的汽车： {{ car }}</p>
    <button class="btn" @click="getCarInfo($parent)">获取父亲的汽车信息</button>
  </div>

</template>

<script lang='ts' setup>
import { reactive, ref } from 'vue';

const toy = ref("奥特曼")
defineExpose({ toy })

const car = reactive({});
const getCarInfo = (parent: any) => {
  Object.assign(car, parent.car)
}
</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
  min-height: 120px;
}
</style>
